<template>
  <div class="simulationMain"
       v-if="questionList.length">
    <div class="questionWrap"
         v-if="questionList.length"
         :class='{"hide":lastQuestion||showQuestion}'>
      <swiper :current="swiperCurrent"
              @change="swiperChangeItem">
        <div v-if=questionList.length>
          <div class="guide">
            <swiper-item>
              <div>
                <p>单选题</p>
                <img :src=guide
                     alt="">
              </div>
            </swiper-item>
          </div>
          <div v-for="(item,index) in questionList.length&&questionList"
               :key=index>
            <swiper-item>
              <div class="question">
                <div class="questionNum">
                  <p class="p1"
                     :data-id=item.id>第{{index+1}}题
                    <span v-if="index===questionList.length-1"
                          @click.stop="navToScore">提交试题</span>
                  </p>
                </div>
                <div class="questionContent">
                  <div class="questionTitle">
                    {{item.question}}
                  </div>
                  <div class="questionAnswer"
                       :data-answer=item.answer>

                    <div v-for="(value,key2,index2) in answer_list2[index]"
                         :key=index2>
                      <p @click.stop="choise(index,key2,index2)"
                         :class='{"right":questionList[index].activeIndex*1 ===key2}'>
                        <span>{{options[key2]}}</span>
                        {{value}}
                      </p>
                    </div>
                  </div>
                </div>
                <!-- 解析 -->
                <div class="anaylise"
                     v-if="questionList[index].activeIndex>=0"
                     :data-index="questionList[index].activeIndex">
                  <div class="answerTips">
                    <span v-if="item.answer === options[commitKey]"
                          style="color:#00cc76">回答正确</span>
                    <span v-else>回答错误，正确答案为：{{item.answer}}，您选择的答案是：{{options[commitKey]}}</span>
                  </div>
                  <div class="analyseAnswer">
                    <p>正确答案：{{item.answer}}</p>
                    <p>所在章节：{{item.location}} </p>
                    <p>知识点： {{item.point}} </p>
                    <p>答案解析：</p>
                    <p>{{item.analysis}}</p>
                  </div>
                </div>
              </div>
            </swiper-item>
          </div>
        </div>
      </swiper>
    </div>
    <div v-else
         class="noData">
      <img :src=noDataPng>
    </div>
    <div class="examOver"
         :class="showExamOver">
      <img :src=examBg
           class="examBg">
      <p class="tips">一共{{questionList.length}}道题，
        <span v-if='count ==questionList.length'>已全部作答</span>
        <span v-else>还有{{questionList.length-count }}道题未作答</span>
      </p>
      <div class="questionBtn">
        <span @click.stop="navRoom">重新做题</span>
      </div>
    </div>
    <div class="markBottom"
         :class='{"hide": lastQuestion}'>
      <!-- :class='{"collectActive":questionList.length && questionList[index].collection*1 ===1}' -->
      <p class="iconfont icon-love"
         v-if="swiperCurrent==0"></p>
      <p class="iconfont icon-love"
         v-else
         :class='{"collectActive":questionList.length && questionList[swiperCurrent-1].collection*1 ===1}'
         @click.stop="addToCollect(swiperCurrent-1,questionList[swiperCurrent-1].id)"></p>
      <p class="iconfont icon-tubiaozhizuomoban"
         @click.stop="navToMenu(false)"></p>
      <p class="iconfont icon-timer">
        <span>{{startHour}}:{{startMin}}:{{startSecond}}</span>
      </p>
      <p>
        <button class="iconfont  icon-share2"
                :data-id=testpaperId
                open-type="share"></button>
      </p>
    </div>
    <!-- 答题部分 -->
    <div class="menuMain "
         :class='{"showmenuMain":showmenuMain}'>
      <div class="topicSelect">
        <div class="singleSelection">
          <p class="title">1.单选题</p>
          <div class="singleList">
            <span v-for="(el,i) in MultiSelection"
                  :key=i
                  @click.stop="addActive(i)"
                  :class="el.active ?'active':''">{{i+1}}</span>
          </div>
        </div>
      </div>
      <div class="fixedBtn">
        <span @click.stop=naviBack>继续练习</span>
        <!-- <span @click.stop="navToScore">提交试卷</span> -->
      </div>

    </div>
  </div>
</template>
  <script>
import { mapState, mapMutations } from 'vuex'
// import { formatTime } from '@/utils'

export default {
  data () {
    return {
      index: 0,
      index2: 0,
      lastQuestion: false,
      showQuestion: false,
      startTimeStamp: 0,
      startSecond: 0,
      startMin: 0,
      startHour: 0,
      timer: null,
      commitAnswer: [],
      examRecord: [],
      commitItem: -1, // 试卷的某一道题
      examPaperId: -1, // 选择考卷的id
      showBottom: false, // 最后一页 隐藏底部工具
      clickAnswer: '',
      showmenuMain: false, // 展示菜单页面
      MultiSelection: [], // 答题选项
      currentIndex: -1,
      commitKey: '',
      count: 0,
      rightTotal: 0,
      totalTime: '',
      rightAnswerArray: [],
      collectArray: [],
      questionList: [],
      options: ['A', 'B', 'C', 'D'],
      answer_list2: [],
      guide: './../../static/images/prev.png',
      noDataPng: './../../static/images/noData.png',
      swiperCurrent: 0,
      testpaperId: -1,
      examBg: './../../static/images/examBg.png'
    }
  },
  onShareAppMessage (options) {
    console.log(options)
    this.shareId = options.target.dataset.id
    console.log(this.shareId)
    if (options.target.dataset.id) {
      return {
        title: '答题',
        path: '/pages/sharePage/main?shareId=' + options.target.dataset.id
      }
    }
  },
  computed: {
    ...mapState({
      device: state => state.device,
      examPaper: state => state.examPaper,
      randomRecord: state => state.randomRecord,
      userInfo: state => state.userInfo
    }),
    height () {
      return this.device.height
    },
    showExamOver () {
      if (this.showmenuMain || this.showQuestion) {
        return 'hide'
      } else if (this.lastQuestion) {
        return 'show'
      } else {
        return ''
      }
    }
  },
  watch: {

  },
  methods: {
    ...mapMutations(['setExamPaper', 'setrandomRecord']),
    swiperChangeItem (e) {
      console.log('swiperChangeItem')
      console.log(e)
      if (parseInt(e) >= 0) {
        this.swiperCurrent = e
      } else {
        this.swiperCurrent = e.mp.detail.current
      }
      console.log(this.swiperCurrent)
    },
    swiperChange (e) {
      console.log('swiperChange')
      console.log(e)
      if (parseInt(e) >= 0) {
        this.swiperCurrent = e
      } else {
        this.swiperCurrent = e.detail.current
      }
      console.log(this.swiperCurrent)
    },
    navRoom () {
      wx.navigateBack({
        delta: 2
      })
    },
    navToScore () {
      let that = this
      this.lastQuestion = true
      console.log(this.rightAnswerArray)
      console.log(this.currentIndex, '当前currentIndex')
      console.log(JSON.stringify(this.commitAnswer))
      for (let i = 0; i < this.questionList.length; i++) {
        if (this.commitAnswer[i]) {
          this.commitAnswer[i] = {
            index: i,
            id: this.questionList[i].id,
            res: this.options.indexOf(this.commitAnswer[i]),
            right: this.commitAnswer[i] === this.rightAnswerArray[i] ? '1' : '0'
          }
        } else {
          this.commitAnswer[i] = {
            index: i,
            id: this.questionList[i].id,
            res: undefined,
            right: 0
          }
        }
      }
      for (let k in this.MultiSelection) {
        if (this.MultiSelection[k].active) {
          this.count++
        }
      }
      this.$http.post('https://dati.co-links.com/operat/recording/', {
        paperid: that.$mp.query.paperId,
        userid: that.userid,
        user_answer_list: JSON.stringify(this.commitAnswer),
        long_time: that.startHour * 3600 + that.startMin * 60 + that.startSecond * 1,
        push_type: 2,
        papername: that.$mp.query.paperName
      }).then((res) => {
        console.log(res)
      })
    },
    choise (index, key, j) {
      console.log(this.questionList)
      console.log(index, key, j)
      this.questionList[index].hide = false
      this.clickAnswer = key
      // this.commitAnswer[index] = j
      this.commitItem = index
      this.questionList[index].activeIndex = key
      this.questionList[index].rightNum2 = this.questionList[index].rightNum
      this.currentIndex = index
      this.commitKey = key
      this.rightAnswerArray[index] = this.questionList[index].answer
      this.commitAnswer[index] = this.options[key]
      this.rightAnswer = this.questionList[index].rightNum
      // console.log(this.commitAnswer)  选择的答案  0123
      for (var k = 0; k < this.commitAnswer.length; k++) {
        this.MultiSelection[index].active = true
      }
      console.log(this.questionList[index].activeIndex)
    },
    // 计时
    fill_zero_prefix (num) {
      return num < 10 ? '0' + num : num
    },
    startCountTime () {
      let that = this
      clearInterval(that.timer)
      that.timer = setInterval(function () {
        that.startSecond = that.fill_zero_prefix(that.startSecond * 1 + 1)
        if (that.startSecond === 59) {
          that.startMin = that.fill_zero_prefix(that.startMin * 1 + 1)
          that.startSecond = that.fill_zero_prefix(0)
        }
        if (this.startMin === 59) {
          that.startHour = that.fill_zero_prefix(that.startHour * 1 + 1)
          that.startMin = that.fill_zero_prefix(0)
        }
      }, 1000)
    },
    navToMenu (flag) {
      // console.log(flag)
      if (flag) {
        this.lastQuestion = false
        this.showQuestion = true
      } else {
        this.lastQuestion = true
      }
      // console.log(this.lastQuestion)
      this.showmenuMain = true
      this.count = 0
      console.log(this.commitAnswer)
    },
    // // 收藏
    addToCollect (index, id) {
      let that = this
      console.log(index, id)
      if (index === -1) {
        return false
      }
      if (this.questionList[index].collection === 1) {
        this.questionList[index].collection = 0
        this.$http.post('https://dati.co-links.com/operat/del_collection', {
          userid: that.userid,
          questionid: id
        }).then((res) => {
          console.log(res)
        })
      } else {
        this.questionList[index].collection = 1
        this.$http.post('https://dati.co-links.com/operat/collection/', {
          userid: that.userid,
          questionid: id
        }).then((res) => {
          console.log(res)
        })
      }
    },
    addActive (i) {
      this.showmenuMain = false
      this.lastQuestion = false
      this.showQuestion = false
      console.log(i)
      this.swiperChange(i * 1 + 1)
      this.currentIndex = i
    },
    naviBack () {
      this.showmenuMain = false
      this.lastQuestion = false
      this.showQuestion = false
    },
    init () {
      let that = this
      this.userid = this.userInfo.user_id || wx.getStorageSync('user_id')
      this.paperId = this.$mp.query.paperId
      this.number = this.$mp.query.number
      this.paperName = this.$mp.query.paperName
      this.testpaperId = this.$mp.query.paperId
      console.log(this.testpaperId)
      console.log(this.paperName)
      if (parseInt(this.paperId) >= 0 && parseInt(this.number) > 0) {
        this.$http.post('https://dati.co-links.com/operat/strong_post/', {
          paperid: that.paperId,
          userid: that.userid,
          number: that.number
        }).then((res) => {
          console.log(res)
          console.log(res.data.data)
          that.questionList = res.data.data
          for (var i in that.questionList) {
            that.questionList[i].activeIndex = -1
            that.questionList[i].hide = true
            that.answer_list2[i] = that.questionList.length && Object.keys(that.questionList[i].answer_list).map(key => that.questionList[i].answer_list[key]).sort((a, b) => {
              return a.localeCompare(b)
            })
          }
          that.MultiSelection = []
          that.examPaperId = that.$mp.query.id
          that.index = that.$mp.query.defaultItem * 1
          for (var m = 0; m < that.questionList.length; m++) {
            that.MultiSelection.push({
              active: false
            })
          }
          console.log(that.questionList)
        })
      } else {
        wx.showModal({
          title: '参数错误,请稍后再试'
        })
      }
    }
  },
  mounted () {
    this.init()
    this.timer = null
    this.collectArray = []
    this.startCountTime()
    this.count = 0
    this.startSecond = '00'
    this.startMin = '00'
    this.startHour = '00'
    if (this.startHour === 0) {
      this.startHour = '0' + this.startHour
    }
    if (this.startMin === 0) {
      this.startMin = '0' + this.startMin
    }
    if (this.startSecond === 0) {
      this.startSecond = '0' + this.startSecond
    }
    this.MultiSelection = []
    this.examPaperId = this.$mp.query.id
    this.index = this.$mp.query.defaultItem * 1
    console.log(this.commitAnswer)
    console.log(this.examPaper)
    if (this.randomRecord.finishStatus === 1) {
      // 试卷已提交  清空之前的状态
      this.lastQuestion = false
      this.showQuestion = false
      this.showmenuMain = false
      this.lastQuestion = false
      this.rightTotal = 0
      this.startSecond = '00'
      this.startMin = '00'
      this.startHour = '00'
      this.commitAnswer = []
      for (let i = 0; i < this.questionList.length; i++) {
        this.questionList[i].activeIndex = -1
      }
    }
    for (var i = 0; i < this.questionList.length; i++) {
      this.MultiSelection.push({
        active: false
      })
    }
  },
  onUnload () {
    this.multiIndex = '请选择章节'
    this.multiIndex2 = '— 请选择知识点 —'
  },
  onShow () {
    clearInterval(this.timer)
    this.showmenuMain = false
    this.lastQuestion = false
  }
}
</script>
 <style lang="stylus">
 swiper {
   height: 100%;
 }

 .simulationMain {
   height: 100%;
 }

 .questionWrap {
   height: calc(100% - 45px);
   overflow-y: scroll;
 }

 .question {
   padding: 0 32rpx;
   margin-bottom: 20rpx;
   overflow-y: scroll;

   .questionNum {
     font-size: 30rpx;
     color: #333;
     height: 98rpx;
     line-height: 98rpx;
     border-bottom: 2rpx solid #e6e6e6;

     p {
       display: inline-block;
     }

     .p2 {
       float: right;
       width: 112rpx;

       span {
         display: inline-block;
         width: 112rpx;
         height: 46rpx;
         background: #febd32;
         color: white;
         font-size: 26rpx;
         text-align: center;
         line-height: 46rpx;
         border-radius: 6rpx;
         -webkit-border-radius: 6rpx;
       }
     }

     .p1 {
       display: block;

       span {
         display: inline-block;
         width: 290rpx;
         height: 76rpx;
         text-align: center;
         line-height: 76rpx;
         background: #00cc76;
         border-radius: 12rpx;
         -webkit-border-radius: 12rpx;
         color: #fff;
         font-size: 28rpx;
         color: #fff;
         float: right;
         margin-top: 13rpx;
       }
     }
   }

   .questionTitle {
     font-size: 32rpx;
     color: #333333;
     padding: 20rpx 0;
   }
 }

 .questionContent {
   overflow-y: scroll;
 }

 .questionContent, .questionAnswer {
   p {
     font-size: 32rpx;
     color: #666666;
     padding: 18rpx 0;
     padding-left: 30rpx;

     span {
       display: inline-block;
       width: 48rpx;
       height: 48rpx;
       border-radius: 50%;
       margin-right: 30rpx;
       border: 1px solid #a5a5a5;
       text-align: center;
       line-height: 48rpx;
     }

     &.active {
       color: #ef5151;

       span {
         border: 1px solid #ef5151;
         background: #ef5151;
         color: white;
       }
     }

     &.right {
       color: #00cc76;

       span {
         background: #00cc76;
         color: #fff;
         border: 1px solid #00cc76;
       }
     }
   }
 }

 .analyseAnswer {
   padding: 20rpx 22rpx;
   background: #ebebeb;
   font-size: 32rpx;
   color: #333333;
   border-radius: 12rpx;
   -webkit-border-radius: 12rpx;
   height: 350rpx;
   overflow-y: scroll;

   p {
     line-height: 50rpx;
   }

   p:last-child {
     font-size: 28rpx;
   }
 }

 .markBottom {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 90rpx;
   border-top: 2rpx solid #e6e6e6;

   p {
     display: inline-block;
     width: 25%;
     height: 100%;
     line-height: 90rpx;
     font-size: 50rpx;
     color: #333;
     text-align: center;

     span {
       display: inline-block;
       font-size: 28rpx;
       margin-left: 10rpx;
       line-height: 90rpx;
       height: 100%;
       vertical-align: top;
     }
   }
 }

 .examOver {
   text-align: center;
   display: none;
 }

 .examBg {
   width: 242rpx;
   height: 224rpx;
   padding-top: 180rpx;
 }

 .tips {
   text-align: center;
   font-size: 32rpx;
   color: #333333;
   padding-top: 50rpx;
 }

 .questionBtn {
   text-align: center;
   position: relative;
   margin-top: 200rpx;

   span, button {
     display: inline-block;
     width: 210rpx;
     height: 68rpx;
     line-height: 68rpx;
     text-align: center;
     border-radius: 10rpx;
     -webkit-border-radius: 10rpx;
     border: 2rpx solid #00cc76;
     font-size: 28rpx;
     color: #00cc76;
   }

   .next {
     background: #00cc76;
     color: white;
     margin-left: 88rpx;
   }

   .disabled {
     background: #ccc;
     color: white;
     border: 2rpx solid #ccc;
   }

   .nextBtn {
     display: none;
   }
 }

 .hide {
   display: none !important;
 }

 .show {
   display: block;
 }

 .questionBtn .show {
   display: inline-block;
 }

 .markBottom .collectActive {
   color: #ef5151;
 }

 .menuMain {
   background: #f7f7f7;
   display: none;
 }

 .menuMain&.showmenuMain {
   display: block;
 }

 .singleSelection, .MultiSelection, .checkSelection {
   padding: 0 32rpx;
   margin-bottom: 20rpx;
   background: white;

   .title {
     padding-top: 20rpx;
     font-size: 32rpx;
     color: #333333;
   }
 }

 .singleList {
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
   -webkit-box-align: center;
   -webkit-align-items: center;
   align-items: center;
   flex-wrap: wrap;
   padding-bottom: 30rpx;

   span {
     display: inline-block;
     width: 60rpx;
     height: 60rpx;
     border-radius: 50%;
     -webkit-border-radius: 50%;
     color: #666666;
     font-size: 32rpx;
     text-align: center;
     line-height: 60rpx;
     background: #e6e6e6;
     margin: 20rpx;

     &.active {
       background: #00cc76;
       color: white;
     }
   }
 }

 .anaylise {
   overflow-y: scroll;
   padding-bottom: 90rpx;
   height: 400rpx;
 }

 .fixedBtn {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   text-align: center;
   height: 88rpx;
   border-top: 1px solid #e6e6e6;
   background: white;

   span {
     display: inline-block;
     margin-top: 8rpx;
     width: 292rpx;
     height: 72rpx;
     text-align: center;
     line-height: 72rpx;
     color: #ffffff;
     font-size: 28rpx;
     border-radius: 12rpx;
     -webkit-border-radius: 12rpx;
     background: #00cc76;

     &:nth-child(2) {
       margin-left: 38rpx;
     }
   }
 }

 .answerTips {
   font-size: 30rpx;
   margin: 20rpx 0rpx 28rpx 0rpx;
   border-radius: 12rpx;
   -webkit-border-radius: 12rpx;
   background: #ebebeb;

   span {
     display: inline-block;
     padding: 10rpx 22rpx;
   }
 }

 .guide {
   height: calc(100% + 90rpx);
   background: red;
   z-index: 2;
 }

 img {
   display: block;
   width: 320rpx;
   height: 320rpx;
   margin: 0 auto;
   margin-top: 50rpx;
 }

 .guide swiper-item {
   overflow-y: scroll;
 }

 .guide swiper-item div {
   height: 100%;
   width: 100%;
 }

 .guide swiper-item div p {
   margin-top: 100rpx;
   font-size: 26rpx;
   color: #000;
   padding: 0 32rpx;
 }

 .noData {
   position: fixed;
   height: 100%;
   width: 100%;
   left: 0;
   top: 0;
   z-index: 4;
   background: white;

   img {
     position: absolute;
     display: block;
     width: 300rpx;
     height: 300rpx;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     margin: auto;
   }
 }
</style>

